<template>
  <!-- 店铺专属明细-->
  <a-modal :width="500" body-style="padding: 10px 20px 30px" :footer="false" v-model:visible="showPlanItemByShop" title="专属明细" title-align="start" :mask-closable="false" @cancel="closedDialog">
    <div class="order-info flex">
      <div class="img-w">
        <ImgPopover :src="currentData.productImg">
          <template #con>
            <a-image width="60" height="60" fit="contain" :src="currentData.productImg" />
          </template>
        </ImgPopover>
      </div>
      <div style="width: 180px; flex-shrink: 0">
        <TextLimit :rows="1">{{ currentData.productName }}</TextLimit>
        <p class="highlight">{{ currentData.sku }}</p>
        <p>{{ currentData.cateName }}</p>
      </div>
      <div style="margin-left: 30px">
        <p>目的仓库：{{ currentData.warehouseName }}</p>
        <p>采购数量：{{ currentData.purchaseAmt }}</p>
      </div>
    </div>
    <a-table class="table-singe-line" ref="tableRef" :data="currentData.planItems" size="mini" :pagination="false">
      <template #columns>
        <a-table-column data-index="shopName" title="店铺" />
        <a-table-column data-index="msku" title="MSKU" :width="140" />
        <a-table-column data-index="purchaseAmt" title="采购数量" :width="80" />
      </template>
    </a-table>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    currentData: {
      type: Object,
      default: () => {},
    },
  })

  const showPlanItemByShop = ref(props.isShow)

  // 关闭
  function closedDialog() {
    emit('closed')
  }
</script>
<style lang="less" scoped>
  .order-info {
    font-size: 12px;
    margin-bottom: 10px;
    .img-w {
      flex-shrink: 0;
      border: 1px solid #ddd;
      margin-right: 5px;
    }
  }
</style>
